<template>
  <el-main>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="运单编号:">
        <el-input v-model="content.waybillNumber" placeholder="请输入运单编号"></el-input>
      </el-form-item>
      <el-form-item label="发件人姓名:">
        <el-input v-model="content.waybillSenderName" placeholder="请输入发件人姓名"></el-input>
      </el-form-item>
      <el-form-item label="收件人姓名:">
        <el-input v-model="content.waybillAddresseeName" placeholder="请输入收件人姓名"></el-input>
      </el-form-item>
      <el-form-item label="运单状态:">
        <el-select v-model="content.waybillStatus">
          <el-option value="0" label="新建"></el-option>
          <el-option value="1" label="已装车"></el-option>
          <el-option value="2" label="到达"></el-option>
          <el-option value="3" label="到达终端网点"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="发件人电话:">
        <el-input v-model="content.waybillSenderPhone" placeholder="请输入发件人电话"></el-input>
      </el-form-item>
      <el-form-item label="收件人电话::">
        <el-input v-model="content.waybillAddresseePhone" placeholder="请输入收件人电话"></el-input>
      </el-form-item>
      <el-form-item label="发件人地址:">
        <el-input v-model="content.waybillSenderAddress" placeholder="请输入收件人电话"></el-input>
      </el-form-item>
      <el-form-item label="收件人地址:">
        <el-input v-model="content.waybillAddresseeAddress" placeholder="请输入收件人地址"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="onSubmit">搜索</el-button>
        <el-button type="primary">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- <div id="yd">
      <el-button type="primary" icon="el-icon-circle-plus" @click="add()">添加</el-button>
      <el-button type="danger" icon="el-icon-delete-solid" @click="delStuList()">多选删除</el-button>
    </div> -->
    <el-table
      height="350px"
      :data="tableData"
      @selection-change="handleSelectionChange"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      style="width: 100%"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="序号" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.waybillId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="运单编号" width="180">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.waybillNumber }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="运单状态" width="180" prop="cid">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.waybillStatus }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="调度状态" width="180">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.waybillSchedulingCondition }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="订单编号" width="180">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.networkTmsOrder.orderNumber}}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="下单时间" width="180">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.networkTmsOrder.orderPlacedate}}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="发件人姓名" width="180">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.networkTmsOrder.orderSenderName}}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="发件人电话" width="180">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.networkTmsOrder.orderSenderPhone}}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="发件人地址" width="180">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.networkTmsOrder.orderTheSenderAddress}}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="收件人姓名" width="180">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.networkTmsOrder.orderAddresseeName}}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="收件人电话" width="180">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.networkTmsOrder.orderAddresseePhone}}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="收件人地址" width="180">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.networkTmsOrder.orderRecipientDetailedAddress}}</el-tag>
          </div>
        </template>
      </el-table-column>
      <!-- @click="handleEdit(scope.$index, scope.row)"  -->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="warning"
            icon="el-icon-warning"
            size="mini"
            @click="Dquery(scope.row)"
          >详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="content.page"
      :page-sizes="[2, 4, 6]"
      :page-size="content.num"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </el-main>
</template>

<script>
// import Vue from "vue";
// import axios from "axios";
// import VueAxios from "vue-axios";
// import {getStuInfo} form '@/api/stu.js'
//Vue.use(VueAxios, axios);
// axios.defaults.baseURL='http://127.0.0.1:8087';
export default {
  data() {
    return {
      tableData: [],
      activeName: "first",
      total: 0,
      dialogFormVisible: false, //是否显示dialog,默认不显示
      dialogFormAdd: false,
      content:{
      page: 1,
      num: 4, //初始的条数
      waybillNumber: "",
      waybillSenderName: "",
      waybillAddresseeName: "",
      waybillStatus: "",
      waybillSenderPhone: "",
      waybillAddresseePhone: "",
      waybillSenderAddress: "",
      waybillAddresseeAddress: ""
      },
      form: {},
      arr: [],
      arr2: [],
      arr3: [],
      multipleSelection: [],
      formLabelWidth: "120px",
      loading: "",
      status: ""
    //   order:{
    //   orderId:"",
    //   orderNumber:"",
    //   orderGoodsNumber:"",
    //   orderUserId:"",
    //   orderWaybillNumber:"",
    //   orderPlacedate:"",
    //   orderProvince:"",
    //   orderTheCity:"",
    //   orderArea:"",
    //   orderType:"",
    //   orderAddresseeAddress:"",
    //   orderAddresseeName:"",
    //   orderAddresseePhone:"",
    //   orderRecipientDetailedAddress:"",
    //   orderSenderAddress:"",
    //   orderSenderName:"",
    //   orderSenderPhone:"",
    //   orderTheSenderAddressL:"",
    //   orderTransportDistance:"",
    //   orderMapLocation:"",
    //   orderPaymentMethods:"",
    //   orderFeeAmount:"",
    //   orderPaymentStatus:"",
    //   orderWhetherInsured:"",
    //   orderProcessStatus:"",
    //   orderEstimatedDeliveryTime:"",
    //   orderOnTrack:"",
    //   orderTrainNumberNumber:"",
    //   orderTaketaskNumber:"",
    //   orderSendtaskNumber:"",
    //   orderStatus:""
    // }
    };
  },
  methods: {
    onSubmit() {
      this.load();
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    add() {
      this.dialogFormAdd = true;
    },
    Dquery(row){
    alert("敬请期待")
      console.log(row)
    // axios.post("/orderapi/tms-order/orderQuery?order_ID"+this.order.orderId).then(data=>{
    //     this.order=data.data.order;
    //     console.log(data)
    // })
    //   this.$store.commit('queryOrder',row)
    //   this.$store.commit("warehouse")
    //   this.$router.push("/home/Wdetails")
    },
    load() {
      this.axios
        .post(
          "/api/transshipment-tms-waybill/queryAllWaybill",this.content)
        .then(data => {
          console.log(data);
          this.tableData = data.data.list; //获取分页数据
        this.content.page=data.data.pageNum;
        this.content.num=data.data.pageSize;
          this.total = data.data.total; //获取总记录数
        });
    },
    //获取每页的条数方法
    handleSizeChange(val) {
      this.num = val;

      this.load();
      console.log(`每页 ${val} 条`);
    },
    //获取当前页
    handleCurrentChange(val) {
      this.currentPage4 = val;
      this.load();
      console.log(`当前页: ${val}`);
    },
    handleSelectionChange(val) {
      console.log(this.multipleSelection);
      this.multipleSelection = val;
    }
  },
  created() {
    this.load();
  },
//   filters: {
//     returntime: data => {
//       var date = new Date();
//       var year = date.getFullYear();
//       //padStart不满两位添加个0
//       var month = (date.getMonth() + 1).toString().padStart(2, "0");
//       var dat = date
//         .getDate()
//         .toString()
//         .padStart(2, "0");
//       console.log(data);
//       return year + "年" + month + "月" + dat + "日";
//     }
//   }
};
</script>

<style>
#yd {
  position: relative;
  left: -539px;
  top: -2px;
}
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  background-color: #d5d5d5;
  border-radius: 5px;
}
</style>